<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .clock {
            width: 600px;
            height: 600px;
            border-radius: 50%;
            border: 2px solid red;
            margin: 0px auto;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="res" class="clock">

    </div>
    <script>
        function timeOut (timeStr) {
            var time = new Date();              //获取当前时间
            var timestamp1 = time.getTime();
            var timestamp2 = timeStr.getTime();
            var timeDif =  parseInt( ( timestamp1 - timestamp2 ) / 1000 ) ;
            var day = parseInt( timeDif / 24 / 3600 ) ; 
            var hours = parseInt( timeDif / 3600 ) % 24 ;
            var minutes = parseInt( timeDif / 60 ) % 60 ;
            var seconds = timeDif % 60 ; 
            var res = `${day}天${hours}小时${minutes}分${seconds}秒` ;
            return res ; 
        }
        var resE = document.getElementById("res");
        var timeStr = new Date("2021-11-22 8:30:00");
        setInterval( function (){
            var res = timeOut( timeStr ) ;
            resE.innerHTML = res ;
        } , 500)
    </script>
</body>
</html>